<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta content="查询并在google maps中显示河南全省（包括郑州 洛阳 焦作 平顶山 驻马店 新乡 南阳 信阳 开封 漯河 安阳 商丘 周口 许昌 濮阳 三门峡 鹤壁 济源）四要素站的气温、风、雨量以及各乡镇自动站的雨量，每分钟自动更新" name="description">
<title>河南省四要素站及乡镇雨量站数据显示、监控与分级报警系统</title>

<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/ui.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />

<script src="script/lonlatdatas.js"></script>
<script src="script/user-overlay.js"></script>
<script src="script/lyRain.js"></script>

<script src="script/ui-init-event.js"></script>
<script src="script/ready.js"></script>

<script>

$(initialize);

</script>

</head>

<body>
	<div id="main-toolbar" class="ui-widget-header ui-corner-all">
		<div class="tool-group">
			<input type="checkbox" id="toggle-temph"/><label for="toggle-temph">气温</label>
			<input type="checkbox" id="toggle-wind"/><label for="toggle-wind">风</label>
			<input type="checkbox" id="toggle-rain" checked="checked"/><label for="toggle-rain">降水</label>
		</div>
	
		<div class="tool-group">
			<select name="rain-range" id="rain-range" class="ui-like ui-widget ui-state-default ui-corner-left ui-corner-right">
				<option value="after20">20时以来</option>
				<option value="30m">30分钟</option>
				<option value="1h">1小时</option>
				<option selected="" value="3h">3小时</option> 
				<option value="6h">6小时</option>
				<option value="12h">12小时</option>
				<option value="24h">24小时</option>
				<option value="any">任意时段</option>
			</select>
		</div>
		
		<div class="tool-group">
			<button id="desc-time">最新</button>
			<button id="select-time">设置时间范围</button>
		</div>
		
		<div class="tool-group">
			<input type="checkbox" id="toggle-alarm"/><label for="toggle-alarm">报警</label>
			<button id="set-alarm">报警设置</button>
		</div>
		
		<div class="tool-group">
			<button id="log-info-button">信息|帮助</button>
		</div>
		
		<div class="tool-group cls" id="set-time-range">
			<input type="text" value="2011-01-26 10:10" size="17" readonly="readonly" name="beginTime" id="begin-time" class="show-time ui-like ui-widget ui-state-default ui-corner-left ui-corner-right"/>
			<div id="time-slider" class="show-time"></div>
			<input type="text" value="2011-01-26 10:10" size="17" name="endTime" id="end-time" class="show-time ui-like ui-widget ui-state-default ui-corner-left ui-corner-right"/>
		</div>
		
		<div id="set-alarm-dialog" title="报警设置">
			<div class="set-alarm-part">
				<h4>报警条件</h4>
				<div class='set-alarm-part-content'>
					<label><input type="checkbox" checked="checked" name="rain-alarm-check" id="rain-alarm-check"/>雨量值(mm)</label>
					<label><input type="text" size="10" value="10 30 50" name="rain-alarm-value" id="rain-alarm-value"/></label>
					
					<label><input type="checkbox" checked="checked" name="temph-alarm-check" id="temph-alarm-check"/>气温(°C)</label>
					<label><input type="text" size="10" value="37 40 42" name="temph-alarm-value" id="temph-alarm-value"/></label>
					
					<label><input type="checkbox" checked="checked" name="wind-alarm-check" id="wind-alarm-check"/>风速(m/s)</label>
					<label><input type="text" size="10"  value="12 16 20" name="wind-alarm-value" id="wind-alarm-value"/></label>
				</div>
			</div> <!-- end set-alarm-part -->
			
			<div class="set-alarm-part">
				<h4>报警方式</h4>
				<div class='set-alarm-part-content'>
					<label><input type="checkbox" checked="checked" name="alarm-volume-check" id="alarm-volume-check"/>声音(<a href="#" id="alarm-volume-test">测试</a>)</label>
					
					<label><input type="checkbox" disabled="disabled" name="alarm-sms-check" id="alarm-sms-check"/>短信(<a href="#" id="alarm-sms-test">测试</a>)</label>
					<label><input type="text" size="40" value="13698835392 13663880026" name="wind-alarm-tel" id="wind-alarm-tel"/></label>
				</div>
			</div> <!-- end set-alarm-part -->
			
			<div class="set-alarm-part">
				<h4>报警区域(<a href="#" id="set-alarm-area" title="开始后在地图上点击鼠标右键开始和结束">开始设置</a>)</h4>
				<div class='set-alarm-part-content'>
					中心：（<span id="alarm-center">34.323907, 112.109291</span>） 半径：<span id='alarm-radius'>100km</span>
				</div>
			</div> <!-- end set-alarm-part -->
		</div>
		
		<div id="log-info-dialog"  title="日志信息">

			<div id="log-info-tabs" class="tabs-bottom">
				<ul>
					<li><a href="#temph-alarm-log">气温报警</a></li>
					<li><a href="#wind-alarm-log">风速报警</a></li>
					<li><a href="#rain-alarm-log">雨量报警</a></li>
					<li><a href="#user-operate-log">用户操作</a></li>
					<li><a href="#ajax-data-log">数据请求</a></li>
					<li><a href="#user-help-info">使用说明</a></li>
				</ul>
				<div id="temph-alarm-log">气温</div>
				<div id="wind-alarm-log">风速</div>
				<div id="rain-alarm-log">雨量</div>
				
				<div id="user-operate-log">用户操作</div>
				
				<div id="ajax-data-log">数据请求</div>
				
				<div id="user-help-info">
					<h3>使用说明</h3>
					<ul>
						<li>
							<h4>程序简介</h4>
							<p>此程序可以实现在<a href="http://maps.google.com/">Google Maps</a>上面显示河南全省最新以及历史的四要素站温度、风、雨量以及所有乡镇雨量站的雨量信息，并可设置各项分级报警，目前支持声音和信息框报警，短信报警正在实现中。</p>
						</li>
						<li>
							<h4>一般操作</h4>
							<p>点击气温、风、降水按钮可以在地图上显示或隐藏相应要素</p>
							<p>点击下拉菜单可选择显示3小时或6小时等降水，点击 最新 按钮后面的向下箭头可以利用滑块选择时间，比如选择时间为2011-06-08 09:00，并选择3小时降水，将会显示9点的风和气温以及6点到9点的雨量</p>
							<p>下拉菜单选择 20时以来 时，将会显示20时以来的总雨量和最新的气温风场等；选择任意时段则可以手动输入起始和结束时间，并显示这段时间的总雨量和结束时间的风速</p>
							<p>当按钮显示 最新 时，程序会自动每隔1分钟请求最新的雨量和风温度等数据</p>
						</li>
						<li>
							<h4>报警设置</h4>
							<p>点击报警按钮可以启动或关闭所有报警</p>
							<p>点击报警按钮后面的小按钮可以详细设置报警参数。例如可以反勾选气温项程序将不对气温进行报警。</p>
							<p>程序可以实现分级报警，比如要对雨量进行分级报警，可以在雨量值输入框内将各分级参数以空格分隔，可设定任意多的级别，已报警的站点程序会自动记录</p>
							<p>目前程序支持声音报警，所以一定要勾选声音前面的选框。短信报警功能正在实现中，敬请期待！</p>
							<p>可以很方便在地图上设置报警区域，点击 开始设置 即可。</p>
							<p>各项报警条件修改后程序可自动保存</p>
						</li>
						<li>
							<h4>信息面板</h4>
							<p>信息面板记录程序运行的各项信息（报警，用户操作，数据请求等），程序帮助文件也在此查看</p>
							<p>当有新的站点达到报警值时，程序会自动记录站点及量值，开启声音并弹出信息面板。用鼠标在信息面板滑过即可关闭声音。</p>
							<p>信息面板中的用户操作页面记录了所有用户的操作，数据请求页记录了所有程序自动请求数据的动作</p>
						</li>
						<li>
							<h4>其他说明</h4>
							<p>本程序不支持IE9以下版本的浏览器，请使用<a href="http://www.mozilla.com/en-US/firefox/fx/" title="点击打开firefox浏览器下载页面">firefox</a>或者<a href="http://www.google.com/chrome?brand=CHKZ&hl=zh-CN" title="点击打开chrome浏览器下载页面">chrome</a>浏览器</p>
							<p>前三个按钮 气温风降水 仅仅选择是否在地图上显示这些数据，并不影响报警。也就是说即使不在地图上显示温度，只要勾选了气温报警，程序依然可以自动报警</p>
							<p>点击报警按钮开启报警后用户将不能修改雨量范围和时间范围</p>
							<p>只要点击报警按钮开启报警，即使不选择声音报警，程序依然会监测数据并在气温等达到报警级别时自动弹出信息面板</p>
							<p>其他问题及建议请邮件联系：xu_work@qq.com</p>
						</li>
					</ul>
				</div>
			</div>
		</div><!-- End log-info-dialog -->
		
		<div class="cls"></div>
	</div> <!-- end #main-toolbar -->
		
	<div id="toolbar">
		<div id="map-toolbar">
			<h4 id="ajax-info"><span id="ajax-rain-info">等待加载数据</span> <span id="ajax-wind-temph-info"></span></h4>	
		</div>
		<div class="cls"></div>
	</div>
	
	<div id="container">
		<div id="left">
			<div id="map_canvas" ></div>
		</div>
	</div>
<!--	-->
	<audio id="alarm-sound" >
        <source src="sound/alarm.ogg" type="audio/ogg" />
        <source src="sound/alarm.mp3" type="audio/mp3" />
    </audio>

</body>
</html>